<script type="text/javascript">
    $(document).ready(function(){
        
    });
</script>

<div id="bloque_der">
    <? echo $form->create(null, array('controller' => 'Perdido', 'action' => 'save', 'enctype' => "multipart/form-data")); ?>

    <div class="blq_datos">
        <div class="fila_datos">
            <div class="titulo_datos">
                Registrar una mascota perdida
            </div>
        </div>
        <div class="fila_datos">
            <label>Ingresa el titulo del anuncio.</label>
            <div class="input_text">
                <input type="text" name="data[Perdido][titulo]" />
            </div>
        </div>
        <div class="fila_datos">
            <label>Es perro o gato?</label>
            <input type="radio" name="data[Perdido][tipo]" value="perro" checked="true"/>Perro
            <input type="radio" name="data[Perdido][tipo]" value="gato" />Gato
        </div>
        <div class="fila_datos">
            <label>Que raza es? </label>
            <select name='data[Perdido][raza]' id='MascotaRaza'>
                <option value='0'>Selecciona una</option>
                <option value='Ovejero Aleman'>Ovejero Aleman</option>
                <option value='Ovejero Aleman'>Otra</option>
            </select>
        </div>
        <div class="fila_datos">
            <label>Es macho o hembra? </label>
            <input type="radio" name="data[Perdido][sexo]" value="macho" checked="true"/>
            Macho
            <input type="radio" name="data[Perdido][sexo]" value="hembra" />
            Hembra
        </div>
        <div class="fila_datos">
            <label>Cual es el nombre de tu mascota?</label>
            <div class="input_text">
                <input type="text" name="data[Perdido][nombre]" />
            </div>
        </div>
        <div class="fila_datos">
            <label>Que edad tiene?</label>
            <select name='data[Perdido][edad]' id='MascotaRaza'>
                <option value='0'>Seleccione la edad de su mascota</option>
                <option value='0.3'>menos de 3 meses</option>
                <option value='0.6'>entre 3 y 6 meses</option>
                <option value='1.0'>entre 6 meses y 1 año</option>
                <option value='2.0'>2 años</option>
                <option value='3.0'>3 años</option>
                <option value='4.0'>4 años</option>
                <option value='5.0'>5 años</option>
                <option value='6.0'>6 años</option>
                <option value='7.0'>7 años</option>
                <option value='8.0'>8 años</option>
                <option value='9.0'>9 años</option>
                <option value='10.0'>10 años</option>
                <option value='11.0'>11 años</option>
                <option value='12.0'>12 años</option>
                <option value='13.0'>13 años</option>
                <option value='14.0'>mas de 13 años</option>
            </select>
        </div>


        <div class="fila_datos">
            <label>Que dia se perdio?</label>
            <input id="fecha_text" type="text" name="data[Perdido][fecha]" style="display: none">
            <div id="datepicker"></div>
        </div>


        <div class="fila_datos">
            <label>Dejanos un comentario que sirva de ayuda</label></br>
            <textarea id="edit" name="data[Perdido][comentario]" cols="90"></textarea>
        </div>
        <div class="fila_datos">
            <label>Foto: </label>
            <input type="file" name="data[Perdido][filedata]" />
        </div>
        <div class="fila_datos">
            <label>Selecciona la zona donde se perdio</label>
            <div class="div_mapa">
                <div id="mapa_edit"></div>
                <div class="btn_mapa">
                    <div>
                        <div class="fila_btn_mapa">
                            <label> Editar Zona: </label>
                        </div>
                        <div class="fila_btn_mapa">
                            <div class="div_label">
                                Largo:
                            </div>
                            <button class="btn_menos" id="menos_largo" type="button"></button>
                            <button class="btn_mas" id="mas_largo" type="button"></button>
                        </div>
                    </div>
                    <div>
                        <div class="fila_btn_mapa">
                            <div class="div_label">
                                Alto :
                            </div>
                            <button class="btn_menos" id="menos_alto" type="button"></button>
                            <button  class="btn_mas" id="mas_alto" type="button"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fila_datos">
            <input type="submit" value="Listo!" id="boton_reg">
        </div>
        <input id="provincia" name="data[Perdido][provincia]" type="hidden" value="" />
        <input id="ciudad" name="data[Perdido][ciudad]" type="hidden" value="" />
        <input id="zona" name="data[Perdido][zona]" type="hidden" value="" />
    </div>
</form>
</div>


<script type="text/javascript">
		
    $(document).ready(function(){
        //controles
        $('#boton_reg').click(function(){
            if(($('#provincia').val() == "")&&($('#ciudad').val() == "")&&($('#zona').val() == "")){
                alert('Por favor selecciona la zona donde se perdio tu mascota');
                return false;
            }
        });

        makeWhizzyWig("edit");

        $("#btn").click(function(){
            var txt = syncTextarea();
            alert($("#edit").val());
        });

        /*	alert("Entra");	
                                $("#datepicker").datepicker({ 
                                monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
                                monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
                                dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
                                dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                                dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
                                dateFormat: 'dd/mm/yyyy', firstDay: 0,					
                                });

         */
        cal_icon = '<?php echo $this->Html->url("/img/calendar.gif", true) ?>';
        $("#datepicker").datepicker({ 
            monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
            monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
            dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
            dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
            dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
            dateFormat: 'dd/mm/yy', firstDay: 0
            //showButtonPanel: true,

            //showOn: "button",
            //buttonImage: cal_icon,
            //buttonImageOnly: true

        });
        
        $("#datepicker").click(function(){
            // formato de fecha requerido: '02-05-2011 ';
            var dia = $("#datepicker").datepicker( "getDate").getDate();
            var mes = $("#datepicker").datepicker( "getDate").getMonth() + 1; 
            var anio = $("#datepicker").datepicker( "getDate").getFullYear();
            if (dia<10){
                dia = "0" + dia;
            }
            if (mes<10){
                mes = "0"+mes;
            }
            fecha = dia+"-"+mes+"-"+anio;
            
            $("#fecha_text").attr("value", fecha);
        });


        /************************************************************/
        var alto = 0.005;
        var largo = 0.004

        // Crea un mapa, inicializado en una posicion, con un zoom dado y una lista de marcadores.
        var mark = new Array();
        // mark[i][j] = (i es el marcado, j = 0 lat, j = 1 long, j = 2 texto)

        mark = [ [ -38.702216,-62.271457,"Hola que tal"] ];




        /******************* Mostrar mapa para editar ************************************************************************/




        function agregarMarkPorMapa(location){
            //$(".secc_mark").append('<div id="'+indice+'"><div class="selec_mark"><input class="text'+indice+'" id="text'+indice+'" type="textbox"><input id="btn_ok'+indice+'" class="btn_ok" type="button" value="OK"><input id="elimMark'+indice+'" class="elimMark" type="button" value="Eliminar"></div><span class="texto_agregarComentario">Agregar Comentario</span><textarea id="text_area'+indice+'" class="comentario_mark" style="display: none"></textarea></div>');
            codeLatLng(location);

            /*marcador = getMarcador();
                                                dire = getDire();
                                                pos = marcador.getPosition();
                                                generarRecuadro(pos.lat(), pos.lng(), mapa, alto, largo);*/
            //indice++;
        }

        img_icon = '<?php echo $this->Html->url("/img/pata.png", true) ?>';
        mapa = editar_mapa(-38.702216,-62.271457,15,"mapa_edit", img_icon);






        /************************* Modificar alto y largo del poligono ******************************************************************/

        $("#menos_largo").click(function(){
            if (largo > 0.001){
                largo = largo - 0.001;
                marcador = getMarcador();
                pos = marcador.getPosition();
                generarRecuadro(pos.lat(), pos.lng(), mapa, alto, largo);
            }
            return false;
        });

        $("#mas_largo").click(function(){
            if (largo < 0.009){
                largo = largo + 0.001;
                marcador = getMarcador();
                pos = marcador.getPosition();
                generarRecuadro(pos.lat(), pos.lng(), mapa, alto, largo);
            }
            return false;
        });

        $("#menos_alto").click(function(){
            if (alto > 0.001){
                alto = alto - 0.001;
                marcador = getMarcador();
                pos = marcador.getPosition();
                generarRecuadro(pos.lat(), pos.lng(), mapa, alto, largo);
            }
            return false;
        });

        $("#mas_alto").click(function(){
            if (alto < 0.009){
                alto = alto + 0.001;
                marcador = getMarcador();
                pos = marcador.getPosition();
                generarRecuadro(pos.lat(), pos.lng(), mapa, alto, largo);
            }
            return false;
        });

    });

</script>

